<template>
	<!--经济健康度指数-->
	<div class="health-index">
		<div class="topBox">
			<el-row>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart1" :title="TransverseBarOptionData.title" :optionData="TransverseBarOptionData" chartType="getTransverseBar" height="40vh" style="padding:0 1vh 2vh 0;margin-top:1vh"></chart-block>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="BlockLineOptionData.title" :optionData="BlockLineOptionData" chartType="getBlockLine" height="40vh" style="padding:0 1vh 2vh 0;margin-top:1vh"></chart-block>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart3" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getPictorialBar" height="40vh" style="padding:0 1vh 1vh 0;margin-top:1vh"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottomBox">
			<el-col span="8">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart4" :title="shadowLineOptionData.title" :optionData="shadowLineOptionData" chartType="getShadowLine" height="42vh" style="padding:0 1vh 1vh 0"></chart-block>
				</div>
			</el-col>
			<el-col span="8">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart5" :title="shadowLineOptionData1.title" :optionData="shadowLineOptionData1" chartType="getShadowLine" height="42vh" style="padding:0 1vh 1vh 0"></chart-block>
				</div>
			</el-col>
			<el-col span="8">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart6" :title="PolarBarOptionData.title" :optionData="PolarBarOptionData" chartType="getpolarBar" height="42vh" style="padding:0 1vh 2vh 0"></chart-block>
				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
import {getEconomyData,getEconomyData1,getEconomyData2,getEconomyData3,getEconomyData4,getEconomyData5} from '@/api/pages.js'
export default {
	name: "health-index",
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	props: {},
	data() {
		return {
			TransverseBarOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			BlockLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状图渐变色
					{
						topColor:'#58FDFF',
						bottomColor:'#FEA57E'
					},
				],
			},
			pictorialBarOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状图渐变色
					{
						topColor:'#1070FF',
						bottomColor:'#43EA80'
					},
				],
			},
			shadowLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(0,217,117,0.8)',
						bottomColor:'rgba(0,217,117,0.1)',
						LineCircleColor:"#00D975",//折线图颜色
						LineCircleBorderColor:"#00D975",//折线图描边颜色
					},
					{
						topColor:'rgba(211,89,0,0.8)',
						bottomColor:'rgba(211,89,0,0.1)',
						LineCircleColor:"#D35900",//折线图颜色
						LineCircleBorderColor:"#F28E26",//折线图描边颜色
					}
				]
			},
			shadowLineOptionData1:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(0,216,255,0.8)',
						bottomColor:'rgba(0,216,255,0.1)',
						LineCircleColor:"#00D8FF",//折线图颜色
						LineCircleBorderColor:"#00D8FF",//折线图描边颜色
					},
					{
						topColor:'rgba(255,246,105,0.8)',
						bottomColor:'rgba(255,246,105,0.1)',
						LineCircleColor:"#FFF669",//折线图颜色
						LineCircleBorderColor:"#FFF669",//折线图描边颜色
					}
				]
			},
			PolarBarOptionData:{}
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getEconomyData('E037')
		this.getEconomyData1('E038')
		this.getEconomyData2('E039')
		this.getEconomyData3('E040')
		this.getEconomyData4('E041')
		this.getEconomyData5('E042')
	},
	methods: {
		// 经济指标挖掘分析-恩格尔系数-年末城镇登记失业人数变化
		getEconomyData(busiCode){
			getEconomyData(busiCode).then(res=>{
				if(res.data.code==200){
					this.TransverseBarOptionData={
						title:res.data.data.title,
						categoryAxis:res.data.data.categoryAxis,
						seriesData:res.data.data.seriesData[0].data,
						unit: res.data.data.seriesData[0].unit, //数据的单位
						imgSrc:require('../../../assets/images/5icon.png'),//图片
						topColor:'#006BCF',
						bottomColor:'#1CFF99'
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-年末城镇登记失业人数变化
		getEconomyData1(busiCode){
			getEconomyData1(busiCode).then(res=>{
				if(res.data.code==200){
					this.BlockLineOptionData={
						title:res.data.data.title,
						categoryAxis:res.data.data.categoryAxis,
						seriesData:res.data.data.seriesData[0].data,
						unit: res.data.data.seriesData[0].unit, //数据的单位
						LinearGradientColor:[//柱状图渐变色
							{
								topColor:'#58FDFF',
								bottomColor:'#FEA57E'
							},
						],
						rotate:35,
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-单位工业增加值能耗
		getEconomyData2(busiCode){
			getEconomyData2(busiCode).then(res=>{
				if(res.data.code==200){
					this.pictorialBarOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						LinearGradientColor:[//柱状图渐变色
							{
								topColor:'#1070FF',
								bottomColor:'#43EA80'
							},
						],
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-工业二氧化硫去除量排放量
		getEconomyData3(busiCode){
			getEconomyData3(busiCode).then(res=>{
				if(res.data.code==200){
					this.shadowLineOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						smooth:true,
						// legendPosition:"center",
						LinearGradientColor:[//柱状渐变颜色
							{
								topColor:'rgba(0,217,117,0.8)',
								bottomColor:'rgba(0,217,117,0.1)',
								LineCircleColor:"#00D975",//折线图颜色
								LineCircleBorderColor:"#00D975",//折线图描边颜色
							},
							{
								topColor:'rgba(211,89,0,0.8)',
								bottomColor:'rgba(211,89,0,0.1)',
								LineCircleColor:"#D35900",//折线图颜色
								LineCircleBorderColor:"#F28E26",//折线图描边颜色
							}
						]
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-工业烟（粉）尘去除量排放量
		getEconomyData4(busiCode){
			getEconomyData4(busiCode).then(res=>{
				if(res.data.code==200){
					this.shadowLineOptionData1={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						smooth:true,
						// legendPosition:"center",
						LinearGradientColor:[//柱状渐变颜色
							{
								topColor:'rgba(0,216,255,0.8)',
								bottomColor:'rgba(0,216,255,0.1)',
								LineCircleColor:"#00D8FF",//折线图颜色
								LineCircleBorderColor:"#00D8FF",//折线图描边颜色
							},
							{
								topColor:'rgba(255,246,105,0.8)',
								bottomColor:'rgba(255,246,105,0.1)',
								LineCircleColor:"#FFF669",//折线图颜色
								LineCircleBorderColor:"#FFF669",//折线图描边颜色
							}
						]
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-工业固体废物综合利用率
		getEconomyData5(busiCode){
			getEconomyData5(busiCode).then(res=>{
				if(res.data.code==200){
					this.PolarBarOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData[0].data,
						unit:res.data.data.seriesData[0].unit,
						topColor:'#fff669',
						bottomColor:'#12a4dc'
					}
				}
			}).catch(err=>{

			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.health-index {
	width:100%;
	height:100%;
	.topBox{
		width:100%;
		height:49%;
	}
	.bottomBox{
		width:100%;
		height:49%;
		margin-top:1.5vh
	}
}
</style>
